到了第 16 天，你的專案已經不再只是幾個小元件的組合了。

隨著功能越來越多，如果程式碼還是「隨手放哪就放哪」，很快就會遇到兩個問題：

1. 難找檔案 —— 想改一個功能，卻找不到對應檔案。
2. 難維護 —— 一個檔案越寫越長，最後誰也不敢動。

今天我們的目標，就是要學會 專案結構化管理，並讓 Cursor 幫我們把程式碼「整理乾淨」。

🗂️ 為什麼需要結構化？

想像一下，你的專案目錄長這樣：

pages/
components/
utils/

一開始很單純，但隨著專案變大，會變成：

• components/ 裡塞了 30 個檔案，找不到誰是誰
• utils/ 裡一堆 function，名字又模糊
• pages/ 裡面還藏著一堆邏輯

這就是傳說中的「巨石程式（Monolith Code）」，看起來堆得很整齊，其實是地雷區。

📐 專案目錄規劃方法

比較推薦的方式，是依照「功能（feature）」來切分：

src/
 ├─ features/
 │   ├─ auth/
 │   │   ├─ components/
 │   │   ├─ hooks/
 │   │   └─ services/
 │   ├─ posts/
 │   │   ├─ components/
 │   │   ├─ hooks/
 │   │   └─ services/
 ├─ shared/
 │   ├─ components/
 │   └─ utils/

• features/：依功能（登入、文章、購物車…）分開
• shared/：共用資源（按鈕、Card、工具函式）
• services/：通常放 API 呼叫或商業邏輯
• hooks/：自定義 React hooks，避免邏輯重複

這樣的結構有幾個優點：

• 找檔案就像「找功能」一樣直覺
• 功能之間不會互相干擾
• 共用元件集中管理，不會分散在四處

💡 Cursor 實戰技巧：自動整理專案

你不需要一個檔案一個檔案慢慢搬。

Cursor 可以幫你做到這件事：

把 components 裡的 LoginForm 移動到 features/auth/components/
並更新所有 import 路徑

它會：

• 幫你建立資料夾
• 搬移檔案
• 自動修正 import
• 有時候甚至會檢查是否少 import

這比你手動整理快得多，還能避免路徑錯誤。

🧹 保持檔案乾淨的習慣

除了「資料夾結構」，你還需要控制「檔案大小」。

常見問題：

• index.tsx 裡面塞了 UI + API 呼叫 + 狀態管理
• 一個檔案破 500 行，誰也不敢重構
• 重複邏輯 copy-paste 到處都是

👉 建議：

1. 拆檔案

   • UI 元件放在 components/
   • API 呼叫放在 services/
   • 狀態邏輯放在 hooks/

2. 抽共用邏輯

   例如：

   // hooks/useAuth.ts
   import { useState } from "react"
   import { login } from "@/features/auth/services/api"
   
   export function useAuth() {
     const [user, setUser] = useState(null)
   
     async function signIn(email: string, password: string) {
       const res = await login(email, password)
       setUser(res.user)
     }
   
     return { user, signIn }
   }
   
   

   在頁面中呼叫：

   const { user, signIn } = useAuth()
   
   

   這樣就能避免把所有邏輯都塞進頁面裡。

🛠️ Cursor 輔助拆檔案

你可以直接對 Cursor 說：

把這個頁面的 API 呼叫抽出去，放到 services/api.ts

或是：

這個檔案太長了，幫我把表單部分抽成一個獨立元件

它會自動：

• 新增檔案
• 搬出程式碼
• 修正 import
• 保持 Build 正常

這就是 AI 協助「程式碼清理」的最佳時機。

🔄 Git 與版本管理再強調一次

昨天我們提過：Build 成功就 Commit。

今天再加一個新習慣：

重構完成後，一定要 Commit！

因為重構很容易出錯，

有時候 Cursor 幫你搬檔案，但你沒注意就多了一個錯誤。

這時候能回到「上一個乾淨版本」會非常重要。

範例：

git add .
git commit -m "Day 16: 專案結構化，整理 auth / posts 模組"

✅ 今天的任務

1. 檢查專案資料夾，至少把一個功能模組化（例如 auth / posts）。
2. 嘗試請 Cursor 幫你移動元件，並觀察是否自動更新 import。
3. 找一個過長的檔案，拆成「元件 / hook / service」三個檔案。
4. 完成後，確保 Build 成功，然後馬上 Commit。

📌 Day 16 總結

今天我們學會了：

• 如何設計專案目錄結構，避免「巨石程式」
• 如何用 Cursor 自動整理檔案，節省大量時間
• 如何保持檔案乾淨，把 UI、邏輯、API 拆開
• 最重要的：養成「重構完成就 Commit」的好習慣